﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/css/main.css" rel="stylesheet" />
    <link href="~/element-ui/theme-chalk/index.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="~/vue/vue-resource.js"></script>
    <script src="~/element-ui/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <el-header style="text-align: right; font-size: 12px;background-color:#545c64">
            <el-menu mode="horizontal" background-color="#545c64">
                <el-menu-item>
                    <img src="~/Img/silvon-inc-20-240.png" style="width:50px;height:50px" />
                    <a style="font-size:30px;color:white">商城管理后台</a>
                </el-menu-item>
                <el-menu-item>
                    <a style="font-size:20px;color:white" href="/community/index">商品</a>
                </el-menu-item>
                <el-menu-item>
                    <a href="/Order/Index" style="font-size:20px;color:white">订单</a>
                </el-menu-item>
                <el-menu-item>
                    <a style="font-size:20px;color:white" href="/User/Index">用户</a>
                </el-menu-item>
                <el-menu-item>
                    <a style="font-size:20px;color:white" href="/Promotions/Index">促销</a>
                </el-menu-item>
                <el-menu-item>
                    <a style="font-size:20px;color:white" href="/MvcController1/Index1">权限</a>
                </el-menu-item>
            </el-menu>
        </el-header>
        <el-container>
            <el-container>
                <el-menu default-active="2"
                         class="el-menu-vertical-demo"
                         @@open="handleOpen"
                         @@close="handleClose"
                         background-color="#545c64"
                         text-color="#fff"
                         active-text-color="#ffd04b">

                    <el-menu-item index="1">
                        <i class="el-icon-menu"></i>
                        <span slot="title"><a href="">促销</a></span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title"><a href="/Promotions/Index">促销管理</a></span>
                    </el-menu-item>
                </el-menu>
                <el-main>
                    <div style="width:100%;background-color:aqua">
                        <el-collapse v-model="activeNames">
                            <el-collapse-item title="筛选查询" name="1">
                                <div style="padding-top:50px">
                                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                        <el-form-item label="关键词">
                                            <el-input v-model="formInline.ptitle" placeholder="标题关键词"></el-input>
                                        </el-form-item>
                                        <el-form-item label="全部">
                                            <el-select v-model="formInline.pstate" placeholder="全部">
                                                <el-option label="请选择" value="2"></el-option>
                                                <el-option label="启用" value="1"></el-option>
                                                <el-option label="未启用" value="0"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button type="primary" @@click="onReset">重置</el-button>
                                            <el-button type="primary" @@click="onSubmit">筛选</el-button>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </div>

                    @* 查询与显示数据 *@
                    <div style="width:100%;background-color:darkgray;padding-top:10px">
                        <div style="width:100%;height:10px;background-color:darkgray;margin-bottom:10px">
                            <div style="float:left;margin-left:20px;margin-bottom:10px">
                                <span>数据列表</span>
                            </div>
                            <div style="float:right;margin-right:20px;margin-bottom:10px">
                                <el-button plain @@click="addPro">添加</el-button>
                            </div>
                        </div>
                        <template>
                            <el-table :data="tableData" height="800">
                                <el-table-column label="序号"
                                                 prop="promotionId">
                                </el-table-column>
                                <el-table-column label="促销标题"
                                                 prop="ptitle">
                                </el-table-column>
                                <el-table-column label="促销详情"
                                                 prop="particulars">
                                </el-table-column>
                                <el-table-column label="是否上架"
                                                 prop="pstate">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.pstate == 1">上架</span>
                                        <span v-if="scope.row.pstate == 0">未上架</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="添加时间"
                                                 prop="createTime">
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="text" size="small"><a href="/Promotions/Index2">商品管理</a></el-button>
                                        <el-button type="text"
                                                   size="small"
                                                   v-on:click="UpdatePro(scope.$index,scope.row)">编辑</el-button>
                                        <el-button type="text"
                                                   size="small"
                                                   v-on:click="DeletePro(scope.$index,scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>

                            </el-table>
                        </template>
                    </div>
                    @* 添加弹出 *@
                    <el-dialog title="添加促销"
                               :visible.sync="dialogVisible"
                               width="30%">

                        <el-form :model="addForm" label-width="100px" :rules="rules" ref="addForm">
                            <el-form-item label="促销标题" prop="ptitle">
                                <el-input v-model="addForm.ptitle"></el-input>
                            </el-form-item>
                            <el-form-item label="抵扣金额" prop="ptitle">
                                <el-input v-model="addForm.price"></el-input>
                            </el-form-item>
                            <el-form-item label="促销详情" prop="particulars">
                                <el-input v-model="addForm.particulars"></el-input>
                            </el-form-item>
                            <el-form-item label="是否上架">
                                <el-radio-group v-model="addForm.pstate">
                                    <el-radio label="1">上架</el-radio>
                                    <el-radio label="0">未上架</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-form>

                        <span slot="footer" class="dialog-footer">
                            <el-button @@click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @@click="addData">确 定</el-button>
                        </span>
                    </el-dialog>
                    @* 修改弹出 *@
                    <el-dialog title="修改促销"
                               :visible.sync="putShow"
                               width="30%">
                        <el-form :model="putForm" label-width="100px" :rules="rules" ref="putForm">
                            <el-form-item label="促销标题" prop="ptitle">
                                <el-input v-model="putForm.ptitle"></el-input>
                            </el-form-item>
                            <el-form-item label="促销详情" prop="particulars">
                                <el-input v-model="putForm.particulars"></el-input>
                            </el-form-item>
                            <el-form-item label="是否上架">
                                <el-radio-group v-model="putForm.pstate">
                                    <el-radio label="1">上架</el-radio>
                                    <el-radio label="0">未上架</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-form>

                        <span slot="footer" class="dialog-footer">
                            <el-button @@click="putShow = false">取 消</el-button>
                            <el-button type="primary" @@click="putData">确 定</el-button>
                        </span>
                    </el-dialog>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
        /*去掉a标签的下划线*/
        a {
            color: black;
            text-decoration: none;
        }
    </style>

</body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],
                formInline: {
                    Ptitle: '',
                    Pstate: '',
                },
                activeNames: ['1'],
                dialogVisible: false,
                putShow: false,
                //添加
                addForm: {
                    ptitle: '',
                    particulars: '',
                    price: '',
                    pstate: '',
                },
                //修改
                putForm: {
                    promotionId: '',
                    ptitle: '',
                    particulars: '',
                    pstate: '',
                },
                rules: {
                    ptitle: [
                        { required: true, message: '请正确输入标题' }
                    ],
                    price: [
                        { required: true, message: '请正确输入抵扣金额' }
                    ],
                    particulars: [
                        { required: true, message: '请输入促销详情' }
                    ]
                },
            }
        },
        created: function () {
            this.getData();
        },
        methods: {
            //显示
            getData() {
                var url = 'http://localhost:62874/api/Promotions/GetPromotions';
                this.$http.get(url, { params: { Ptitle: this.formInline.ptitle, Pstate: this.formInline.pstate} }).then(function (result) {
                    this.tableData = result.body.data;
                    this.current.total = result.total;
                });
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //查询
            onSubmit() {
                this.getData();
            },
            //重置
            onReset() {
                this.formInline.ptitle = null;
                this.getData();
            },
            //删除
            DeletePro(index, row) {
                if (confirm("确定删除吗?")) {
                    var url = 'http://localhost:62874/api/Promotions/DelPromotions';
                    this.$http.delete(url, { params: { id: row.promotionId } }).then(function (result) {
                        if (result.body > 0) {
                            this.$message('删除成功');
                            this.getData();
                        } else {
                            this.$message('删除失败');
                        }
                    });
                }
            },
            //添加弹出框
            addPro() {
                this.dialogVisible = true;
            },
            //添加确认框
            addData() {
                var url = 'http://localhost:62874/api/Promotions/AddPromotions';
                var data = JSON.stringify(this.addForm);
                this.$http.post(url, data, { emulateJSON: true }).then(function (result) {
                    if (result < 0) {
                        this.$message.error("添加失败");
                    } else {
                        this.dialogVisible = false;
                        this.$message.success("添加成功");
                        this.getData();
                    }
                });
            },
            //修改弹出
            UpdatePro(index, row) {
                this.putShow = true;
                this.putForm = row;
            },
            //修改确认
            putData() {
                var url = 'http://localhost:62874/api/Promotions/UpdatePromotions';
                var data = JSON.stringify(this.putForm);
                this.$http.put(url, data, { emulateJSON: true }).then(function (result) {
                    if (result.body > 0) {
                        this.$message.success("修改成功");
                        this.putShow = false;
                        this.getData();
                    } else {
                        this.$message.success("修改失败");
                    }
                });
            },
        },
    });

</script>